<template>
  <view class="container">
    <!-- <uni-nav-bar left-icon="back" @clickLeft="goBack" @clickRight="backRight" right-text="搜索" title="保养"></uni-nav-bar> -->
    <view class="">
      <v-tabs v-model="activeTab" bgColor="#F0F3F6" :fixed="true" :lineScale="0.2" :scroll="false" :tabs="tabs"
              activeFontSize="32rpx" fontSize="30rpx" @change="changeTab"></v-tabs>

    </view>
    <tm-scrolly ref="scrollRef" :height="listHeight" :refresher="false" @bottom="onScrollToBottom">
      <!-- 内容  待保养-->
      <view v-show="activeTab == indexs">
        <block v-if="recordList.length > 0">
          <uni-card v-for="(item,index) in recordList" :key="index">
            <view class="record" @click="verticalLadder(item.upkeepId)">
              <view class="record-address">
                {{ item.elevatorName }}
                <text v-if="item.upkeepType == 1">[半月]</text>
                <text v-if="item.upkeepType == 2">[季度]</text>
                <text v-if="item.upkeepType == 3">[半年]</text>
                <text v-if="item.upkeepType == 4">[年度]</text>
              </view>
              <view class="" v-if="indexs == 1">提交人：{{ item.referUser }}</view>
              <view class="information disali">
                <!-- left -->
                <view class="information-left">
                  <view class="record-time">
                    截止时间:
                    <text>{{ item.overTime }}</text>
                  </view>
                </view>
                <!-- 待保养 right-->
                <view class="successMaintain backc5 disali" v-if="indexs == 0">
                  <image src="../../../static/image/detailsMsg/time.png" mode=""></image>
                  <!-- <uni-icons type="success"></uni-icons> -->
                  <view class="handleMaintain">
                    <text>待保养</text>
                  </view>
                </view>
                <view class="successMaintain backd5 disali" v-if="indexs == 1">
                  <image src="../../../static/image/detailsMsg/time.png" mode=""></image>
                  <!-- <uni-icons type="success"></uni-icons> -->
                  <view class="handleMaintain">
                    <text>待确认</text>
                  </view>
                </view>
              </view>

            </view>
          </uni-card>
        </block>
      </view>
    </tm-scrolly>
    <view class="" v-if="recordList.length === 0">
      <nullPage></nullPage>
    </view>
  </view>
</template>

<script>
import nullPage from '@/components/null.vue'
import {listUpkeepInfo, startUpkeep} from "@/api/iot/upkeepInfo";
import TmScrolly from "@/tmui/components/tm-scrolly/tm-scrolly.vue";
import {useWindowInfo} from "@/tmui/tool/useFun/useWindowInfo";
import UniCard from "@/uni_modules/uni-card/components/uni-card/uni-card.vue";

export default {
  components: {
    UniCard,
    TmScrolly,
    nullPage
  },
  data() {
    return {
      activeTab: 0,
      tabs: ['待保养', '待确认', '已完成'],
      pageNum: 1,
      recordList: [],
      indexs: 0,
      listHeight: 1000
    }
  },
  onLoad() {
    /**
     * 获取页面高度 减去上面筛选的高度 再减去下面底部的高度 单位px
     * 返回需要转换为rpx
     */
    const windowInfo = useWindowInfo();
    /**
     * h5获取的height是所有元素的height
     * 微信获取的height是不包标题栏的
     * 但是h5的标题高度会在top属性显示  微信为0
     * 使用height - top就是实际页面高度 不用判断环境了
     */
    const windowHeight = windowInfo.height;
    const titleHeight = windowInfo.top;
    // 头部区域高度
    const headHeight = 40;
    // 底部区域高度
    const bottomHeight = 30;
    const bottomSafe = windowInfo.bottomSafe;
    this.listHeight = uni.$tm.u.torpx(
        windowHeight - titleHeight - headHeight - bottomHeight - bottomSafe,
    );
    this.getRecordList();
  },
  methods: {
    // 导航返回事件
    goBack() {
      uni.switchTab({
        url: "../../tabbar/work/work"
      })
    },
    // 导航右边事件
    backRight() {
      uni.switchTab({
        url: ""
      })
    },
    changeTab(index) {
      this.indexs = index
      this.pageNum = 1
      this.recordList = []
      this.getRecordList()
    },
    // 待确定页面跳转到保养完成
    gomaintainOver() {
      uni.navigateTo({
        url: "../verticalLadder/verticalLadder?elevatorId="
      })
    },
    // 待保养，接口
    async getRecordList() {
      console.log(this.indexs)
      let param = {
        pageNum: this.pageNum,
        pageSize: 10,
        upkeepState: this.indexs + 1,
      }
      const res = await listUpkeepInfo(param)
      if (res.rows.length < 10 && this.recordList.length > 0) {
        uni.showToast({
          title: '已加载全部',
          icon: 'none'
        })
      } else if (res.rows === []) {
        uni.showToast({
          title: '暂无数据',
          icon: 'none'
        });
      } else {
        this.recordList = this.recordList.concat(res.rows);
      }
    },
    async verticalLadder(e) {

      // if (res) {
      if (this.indexs == 0) {
        const res = await startUpkeep(e)
        if (res) {
          uni.navigateTo({
            url: "/pages/gird/verticalLadder/verticalLadder?upkeepId=" + e
          })
        }

      }
      if (this.indexs == 1) {
        uni.navigateTo({
          url: "/pages/gird/verticalLadder/verticalLadder_affirm?upkeepId=" + e
        })
      }
      if (this.indexs == 2) {
        uni.navigateTo({
          url: "/pages/gird/verticalLadder/verticalLadder_perform?upkeepId=" + e
        })
      }
      // }

    },
    onScrollToBottom(e) {
      this.pageNum = this.pageNum + 1;
      this.getRecordList();
    }
  },
  onPullDownRefresh() {
    this.recordList = [];
    this.pageNum = 1;
    this.getRecordList();
    uni.stopPullDownRefresh();
  }
}
</script>

<style scoped>
.scroll-Y {
  height: 300rpx;
}

.scroll-view_H {
  white-space: nowrap;
  width: 100%;
}

.scroll-view-item {
  height: 300rpx;
  line-height: 300rpx;
  text-align: center;
  font-size: 36rpx;
}

.scroll-view-item_H {
  display: inline-block;
  width: 100%;
  height: 300rpx;
  line-height: 300rpx;
  text-align: center;
  font-size: 36rpx;
}

.uni-icons {
  color: #3AC211;
}

.disali {
  display: flex;
  align-items: center
}

.backc5 {
  background-color: #ADB5C5;
}

.backd5 {
  background-color: #65D0D5;
}

.uni-card {
  width: 670rpx;
  /* height: 280rpx; */
  background: #FFFFFF;
  /* box-shadow: 0rpx 10rpx 10rpx 0rpx rgba(52, 54, 61, 0.05); */
  border-radius: 16rpx;
  margin: 0 auto;
  margin-top: 20rpx;
  border: none;
  line-height: 280rpx;
  text-align: left;
}

.record {
  font-family: PingFang SC;
  font-weight: 400;
  /* margin: 40rpx 0; */
}

.record-address {
  font-size: 30rpx;
  color: #34363D;
  display: flex;
  justify-content: space-between;
  margin-bottom: 30rpx;
}

.record-address text {
  color: #017EFE;
}

.record-state {
  font-size: 30rpx;
  color: #017EFE;
}

/* 左右 信息*/
.information {
  display: flex;
  justify-content: space-between;
  /* align-items: center; */
  flex-wrap: nowrap;
  margin-top: 10rpx;

}

.record-time {
  font-size: 24rpx;
  color: #989BA6;
}

.record-time text {
  margin-left: 15rpx;
  color: #34363D;
  word-spacing: 15rpx;
  letter-spacing: 1rpx;
}

/* 待确认 */
.successState {
  background: #65D0D5;
  width: 150rpx;
  height: 60rpx;
  text-align: center;
  /* box-shadow: 0px 5px 10px 0px rgba(58, 194, 17, 0.2); */
  border-radius: 28rpx;
  color: #FFFFFF;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.successState image {
  width: 30rpx;
  height: 30rpx;
  background: #65D0D5;
  border-radius: 10rpx;
  vertical-align: middle;
}

.successState text {
  font-size: 24rpx;
  margin-left: 10rpx;
}

/* 待保养 */
.successMaintain {
  width: 150rpx;
  height: 60rpx;
  text-align: center;
  /* box-shadow: 0px 5px 10px 0px rgba(58, 194, 17, 0.2); */
  border-radius: 28rpx;
  color: #FFFFFF;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.successMaintain image {
  width: 30rpx;
  height: 30rpx;
  /* background: #65D0D5; */
  border-radius: 10rpx;
  vertical-align: middle;
}

.successMaintain text {
  font-size: 24rpx;
  margin-left: 10rpx;
}

/* 已完成 */
.successAccomplish {
  background-color: #3AC211;
  width: 150rpx;
  height: 60rpx;
  text-align: center;
  /* box-shadow: 0px 5px 10px 0px rgba(58, 194, 17, 0.2); */
  border-radius: 28rpx;
  color: #FFFFFF;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.successAccomplish image {
  width: 30rpx;
  height: 30rpx;
  border-radius: 10rpx;
  vertical-align: middle;
}

.successAccomplish text {
  font-size: 24rpx;
  margin-left: 10rpx;
}

.v-tabs__container {
  background: RGBA(240, 243, 246, 1) !important;
}
</style>
